<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-grid td {
                white-space: nowrap;
            }
        </style>
    </ui:define>
    
    <ui:define name="title">
        Spinner
    </ui:define>

    <ui:define name="description">
        Spinner is used to provide an input with increment and decrement buttons on an input text.
    </ui:define>

    <ui:param name="documentationLink" value="/components/spinner" />

    <ui:define name="implementation">

        <h:form>
            <h:panelGrid columns="2" cellpadding="5" styleClass="ui-grid">
                <h:outputLabel for="@next" value="Basic Spinner: " />
                <p:spinner id="basic" value="#{spinnerView.number1}" />

                <h:outputLabel for="@next" value="Step Factor: " />
                <p:spinner id="step" value="#{spinnerView.number2}" stepFactor="0.25" />

                <h:outputLabel for="@next" value="Min/Max: " />
                <p:spinner id="minMax" value="#{spinnerView.number3}" min="0" max="100" />
                
                <h:outputLabel for="@next" value="Rotate: " />
                <p:spinner id="rotate" value="#{spinnerView.number6}" min="0" max="10" rotate="true" />

                <h:outputLabel for="@next" value="Prefix: " />
                <p:spinner id="prefix" value="#{spinnerView.number4}" prefix="$" min="0" />

                <h:outputLabel for="ajaxSpinner" value="Ajax Spinner: " />
                <p:outputPanel>
                    <p:spinner id="ajaxSpinner" value="#{spinnerView.number5}">
                        <p:ajax update="ajaxSpinnerValue" process="@this" />
                    </p:spinner>
                    <h:outputText id="ajaxSpinnerValue" value="#{spinnerView.number5}" style="padding-left: 10px" />
                </p:outputPanel>
            </h:panelGrid>
            
            <br />
            
            <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" />

            <p:dialog header="Values" widgetVar="dlg" showEffect="fold" hideEffect="fold">
                <h:panelGrid id="display" columns="2" cellpadding="5">
                    <h:outputText value="Value 1: " />
                    <h:outputText value="#{spinnerView.number1}" />

                    <h:outputText value="Value 2: " />
                    <h:outputText value="#{spinnerView.number2}" />

                    <h:outputText value="Value 3: " />
                    <h:outputText value="#{spinnerView.number3}" />

                    <h:outputText value="Value 4: " />
                    <h:outputText value="#{spinnerView.number4}" />

                    <h:outputText value="Value 5: " />
                    <h:outputText value="#{spinnerView.number5}" />
                </h:panelGrid>
            </p:dialog>
        </h:form>
        
    </ui:define>

</ui:composition>
